{% extends "base_generic.html" %}

{% block title %}{{ book.title }}{% endblock %}

{% block content %}
    <div class="page-header"
         style="background: linear-gradient(45deg, #00b894, #00a085); color: white; padding: 40px; border-radius: 20px; margin: -15px -15px 30px -15px; box-shadow: 0 10px 30px rgba(0, 184, 148, 0.3);">
        <h1 style="margin: 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-size: 3em;">📖 {{ book.title }}</h1>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default"
                 style="border: none; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); background: rgba(255,255,255,0.95);">
                <div class="panel-heading"
                     style="background: linear-gradient(45deg, #74b9ff, #0984e3); color: white; border-radius: 20px 20px 0 0; padding: 20px;">
                    <h3 class="panel-title"
                        style="margin: 0; font-size: 1.5em; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">📋 Book
                        Details</h3>
                </div>
                <div class="panel-body"
                     style="padding: 30px; background: linear-gradient(135deg, rgba(116, 185, 255, 0.05) 0%, rgba(9, 132, 227, 0.05) 100%); border-radius: 0 0 20px 20px;">
                    <p style="margin-bottom: 20px; font-size: 1.1em;"><strong style="color: #2d3436;">✍️
                        Author:</strong>
                        {% if book.author %}
                            <a href="{{ book.author.get_absolute_url }}"
                               style="color: #0984e3; text-decoration: none; font-weight: bold; transition: all 0.3s ease;">{{ book.author }}</a>
                        {% else %}
                            <span style="color: #636e72;">Unknown Author</span>
                        {% endif %}
                    </p>

                    <p style="margin-bottom: 20px; line-height: 1.8;"><strong style="color: #2d3436;">📝
                        Summary:</strong> <span style="color: #636e72;">{{ book.summary }}</span></p>

                    <p style="margin-bottom: 20px; font-size: 1.1em;"><strong style="color: #2d3436;">📚 ISBN:</strong>
                        <span style="color: #00b894; font-weight: bold;">{{ book.isbn }}</span></p>
          
                    {% if book.genre.all %}
                        <p style="margin-bottom: 20px;"><strong style="color: #2d3436;">🏷️ Genre:</strong>
                            {% for genre in book.genre.all %}
                                <span class="label label-primary"
                                      style="background: linear-gradient(45deg, #a29bfe, #6c5ce7); margin-right: 8px; padding: 8px 15px; border-radius: 20px; font-size: 13px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">{{ genre.name }}</span>
                                {% if not forloop.last %} {% endif %}
                            {% endfor %}
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-info"
                 style="border: none; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); background: rgba(255,255,255,0.95);">
                <div class="panel-heading"
                     style="background: linear-gradient(45deg, #00cec9, #00b894); color: white; border-radius: 20px 20px 0 0; padding: 20px;">
                    <h3 class="panel-title"
                        style="margin: 0; font-size: 1.5em; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">📚 Copies</h3>
                </div>
                <div class="panel-body"
                     style="padding: 25px; background: linear-gradient(135deg, rgba(0, 206, 201, 0.05) 0%, rgba(0, 184, 148, 0.05) 100%); border-radius: 0 0 20px 20px;">
                    {% for copy in book.bookinstance_set.all %}
                        <div class="well well-sm"
                             style="background: rgba(255,255,255,0.7); border: none; border-radius: 15px; padding: 20px; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">
                            <p class="text-muted" style="margin-bottom: 15px;">
                                {% if copy.status == 'a' %}
                                    <span class="label label-success"
                                          style="background: linear-gradient(45deg, #00b894, #00a085); padding: 8px 15px; border-radius: 20px; font-size: 12px;">✅ Available</span>
                                {% elif copy.status == 'o' %}
                                    <span class="label label-danger"
                                          style="background: linear-gradient(45deg, #e74c3c, #c0392b); padding: 8px 15px; border-radius: 20px; font-size: 12px;">🔒 On loan</span>
                                {% elif copy.status == 'm' %}
                                    <span class="label label-warning"
                                          style="background: linear-gradient(45deg, #f39c12, #e67e22); padding: 8px 15px; border-radius: 20px; font-size: 12px;">🔧 Maintenance</span>
                                {% elif copy.status == 'r' %}
                                    <span class="label label-info"
                                          style="background: linear-gradient(45deg, #3498db, #2980b9); padding: 8px 15px; border-radius: 20px; font-size: 12px;">📋 Reserved</span>
                                {% endif %}
                            </p>

                            <p style="margin-bottom: 10px; color: #2d3436;"><strong>🏢 Imprint:</strong> <span
                                    style="color: #636e72;">{{ copy.imprint }}</span></p>
                            <p class="text-muted" style="margin-bottom: 10px;"><small style="color: #b2bec3;">🆔
                                ID: {{ copy.id }}</small></p>

                            {% if copy.due_back and copy.status != 'a' %}
                                <p style="margin-bottom: 0; color: #2d3436;"><strong>📅 Due back:</strong> <span
                                        style="color: #e17055; font-weight: bold;">{{ copy.due_back }}</span></p>
                            {% endif %}
                        </div>
                    {% empty %}
                        <p class="text-muted"
                           style="text-align: center; color: #b2bec3; font-style: italic; padding: 20px;">📭 No copies
                            available</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="margin-top: 30px;">
        <div class="col-md-12">
            <div style="text-align: center; padding: 20px; background: rgba(255,255,255,0.5); border-radius: 15px;">
                <a href="{% url 'books' %}" class="btn btn-default"
                   style="background: linear-gradient(45deg, #ddd6fe, #c4b5fd); color: #5b21b6; border: none; padding: 12px 25px; border-radius: 25px; margin: 0 10px; text-decoration: none; font-weight: bold; transition: all 0.3s ease;">
                    ⬅️ Back to book list
                </a>

                {% if perms.catalog.can_mark_returned %}
                    <a href="{% url 'book-update' pk=book.pk %}" class="btn btn-primary"
                       style="background: linear-gradient(45deg, #3498db, #2980b9); border: none; padding: 12px 25px; border-radius: 25px; margin: 0 10px; text-decoration: none; font-weight: bold; transition: all 0.3s ease;">
                        ✏️ Edit book
                    </a>
                    <a href="{% url 'book-delete' pk=book.pk %}" class="btn btn-danger"
                       style="background: linear-gradient(45deg, #e74c3c, #c0392b); border: none; padding: 12px 25px; border-radius: 25px; margin: 0 10px; text-decoration: none; font-weight: bold; transition: all 0.3s ease;">
                        🗑️ Delete book
                    </a>
                {% endif %}
            </div>
        </div>
    </div>

    <style>
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
        }

        .well:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
        }

        .label {
            transition: all 0.3s ease;
        }

        .label:hover {
            transform: scale(1.05);
        }
    </style>

{% endblock %} 